<template>
  <div>
    <form-cascader 
      :field="field" 
      popper-class='cascader-all' 
      :props-v2='cascaderProps' 
      :tree='directoryTree' 
      version='new' 
      show-all-levels 
      :value='value' 
      @input='catalogInput'
    >
    </form-cascader>
  </div>
</template>

<script>
import FormMixin from '@src/component/form/mixin/form'
import { getArrayFirstValue } from '@src/util/array.ts'
import { isArray, isEmpty } from '@src/util/type'

export default {
  name: 'product-type-extend-path-name-build',
  mixins: [FormMixin],
  props: {
    tree: {
      type: Array,
      default: () => []
    },
    value: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      cascaderProps: {
        value: 'id',
        label: 'name',
        children: 'tasks',
        expandTrigger: 'hover',
        checkStrictly: true
      },
      parentIds: []
    }
  },
  computed: {
    directoryTree() {
      this.deleteEmpty(this.tree)
      return this.tree
    }
  },
  methods: {
    catalogInput(value) {
      const field = this.field
      this.parentIds = value;
      
      this.update({ field, newValue: value, oldValue: this.value })
    },
    /** 
     * @description 删除空子集
     * -- 抄的
    */
    deleteEmpty(list) {
      if (!isArray(list)) return
      
      list.forEach(item => {
        if (isEmpty(item?.tasks)) {
          delete item.tasks
        } else {
          this.deleteEmpty(item?.tasks)
        }
      })
    },
    update({ field, newValue, oldValue }){
      this.$emit('update', { newValue, oldValue, field })
      this.$emit('input', newValue)
    },
  }
}
</script>

<style>

</style>